<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="591px"
    @close="handleClose"
    class="msg-container"
    custom-class="msg-dia"
  >
    <div slot="title" class="title">
      <img src="@/assets/img/notice.png" alt="" />
      <span>消息通知</span>
    </div>
    <span>{{ msgInfo }}</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  /**
   * 消息详情弹框
   */
  data() {
    return {
      dialogVisible: false,
    };
  },
  props: ["showVisible", "activeMenu", "msgInfo"],
  watch: {
    showVisible(val) {
      if (val) {
        this.dialogVisible = true;
      } else {
        this.dialogVisible = false;
      }
    },
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    submit() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
img {
  vertical-align: middle;
}
.msg-container {
  .title {
    display: flex;
    align-items: center;
    img {
      width: 18px;
      height: 18px;
      margin-right: 12px;
      margin-top: -3px;
    }
    span {
      font-size: 16px;
      font-weight: bold;
      color: #333333;
    }
  }
  /deep/ .el-dialog__header {
    padding: 23px !important;
  }
  /deep/ .el-dialog__body {
    padding-top: 0 !important;
    padding-left: 53px !important;
    padding-right: 68px !important;
    padding-bottom: 34px !important;
  }
  /deep/ .el-dialog__body span {
    color: #333333;
  }
}
</style>
<style lang="scss">
.msg-dia {
}
</style>